@charset "utf-8";
@import "_iconfont.scss";
@function r($px){
    @return ($px/40)*1rem;
}
@function px($px){
    @return ($px/2)*1px;
}
#web{
   width: r(750);
   height: 100%;
   position: relative;
}
header{
    border-top:1px solid transparent;
    width: 100%;
    height: px(150);
    .head_logo{
        width: px(123);
        height: px(123);
        overflow: hidden;
        float: left;
        margin-top:px(17);
        margin-left:r(14);
        img{
            width: 100%;
        }
    }
    .searchBar{
        width: r(304);
        height:px(50);
        border: 1px solid #ff9344;
        border-radius: px(25);
        margin: 0 auto;
        margin-top:px(53);
        transform: translateX(-11%);
        font-size: 0;
        padding: 0 5px;        
        box-sizing: border-box;
       
        input{
            border: none;
            display: inline-block;
            width:calc(100% - 24px);
            border-radius: 24px;
            vertical-align: middle;
            height:100%;
            text-indent: 7px;
            font-size: 12px;          
            box-sizing: border-box;
            padding-top:3px;
            
        }
    
        img{
            vertical-align: middle;
            width:px(36);
            height: px(36);
        }
    }
    .selectBar{
//      float: right;
        width: 79px;
        height: 27px;
        border: 1px solid #ff9344;
        margin-top:px(50);
        margin-right:r(21);
//      display: block;
        
        select{
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            text-indent: 7px;
            vertical-align: top;
            //去除默认样式（小三角）
            appearance: none;
            -webkit-appearance: none;
//          text-align: center;
            background: url(../img/xiaojiao.png) no-repeat;
            background-size:15px 8px ;
            background-position: right 6px center;
        }
    }
}


.session{
    .swiper-container{
        .swiper-button-prev,.swiper-button-next{
            background-size: 20px 44px;
            width:17px;
        }
        img{
            width:100%;height:px(285);
        }
        
        }
    .discount-top{
        border-top:1px solid transparent;
        span{
            img{
            width:px(56);
            height:px(54);
            float:left;
            margin-left: r(21);   
                
            }
        }      
        h3{
            float:left;
            margin-left: r(9);
            font-size: px(30);
            transform: translateY(5px);
       
        }
        .more{
            span{
                float:right;
                line-height:px(26);
               
            }
            img{
                width:px(26);
                height:px(26);
                
            }
            margin-top:px(15);
            margin-right:r(32);
            font-size: px(24);
        }
    }
    .show{
        width:r(590);
        margin:0 auto;
        margin-top:px(17);
        img{
            width:r(239);

            padding:0 2px;
        }
        .show-bottom{
            margin-top:px(30);
        }
    }
    
    .like{
        margin-top:px(37);
        border-top:1px solid transparent;
        .content-left{
            margin-left:r(21);
                margin-top:px(34);
            img{
                width:px(210);
                height:px(164);              
            }
        }
        .content-middle{
            margin-left:r(21);
            p{
                margin-bottom:px(20);
            }
            .c-title{
                font-size: px(30);
                font-weight: bold;
            }
            .c-com{
                font-size: px(22);
                color:#494949;
            }
            .c-price{
                font-size: px(32);
                color:#ff9344;
            }
        }
        .content-right{
            margin-right:r(17);
            p{
                font-size: px(22);
                &:nth-child(2){
                   margin-top:px(71);
                }
            }
        }
    }
}



footer{
    width: r(750);
    height: px(136);
    position: absolute;
    left: 0;
    bottom: 0;

    ul{

        li{ 
            width: 25%;
            float: left;
            text-align: center;
            margin-top:px(20);
            font-size:px(26);
            .iconfont{
                font-size:33px;
                -webkit-text-stroke: 1px #ff9344;    
                color:white;
            }
            

        }
    }
}
.session{
    position: absolute;
    top: 75px;
    bottom: px(136);
    left: 0;
    right: 0;
    //纵向滚动
    overflow-y:scroll ;
    //弹性滚动
    -webkit-overflow-scrolling: touch;
}
footer ul li .active{
    color: #ff9344;
}
